import React, { Component } from 'react'
import ctx, { Provider, Consumer } from './context/appContext'

class Child1 extends Component {
  render() {
    return (
      <div>
        {/* 
          Consumer 用来消费Provider中提供的数据，它标签中间要为回调函数
          回调函数的参数为Provider中提供的数据
          此方案，了解一下就可以
        */}
        <Consumer>
          {(value) => {
            return <h3>child1 -- {value.count}</h3>
          }}
        </Consumer>
      </div>
    )
  }
}

class Child2 extends Component {
  // 方案2，针对的是类组件 -- 类组件推荐用此方法来进行消费conetxt
  // 定义一个静态变量 contextType，给它赋值一个context对象，它就会给当前的组件实例上绑定 this.context成员属性
  // 在成员方法上就可以通过this.context来消费Provider中的数据
  static contextType = ctx

  render() {
    const { setCount } = this.context
    return (
      <div>
        <button
          onClick={() => {
            setCount(1)
          }}
        >
          ++count++ child2
        </button>
      </div>
    )
  }
}

class App extends Component {
  state = {
    count: 100,
    setCount: (n) => {
      this.setState((state) => ({ count: state.count + n }))
    }
  }

  render() {
    return (
      <div>
        <h2>app组件 -- {this.state.count}</h2>
        <hr />
        {/* 
          Provider 包裹要共享的子孙组件
            + value 共享的数据，对象
        */}
        <Provider value={this.state}>
          <Child1 />
          <Child2 />
        </Provider>
      </div>
    )
  }
}

export default App
